<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            margin: 20px auto;
            width: 500px;
        }
        .day {
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .header {
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>简单日111历</h1>
<div id="calendar"></div>
<script>
    function createCalendar(year, month) {
        const calendar = document.getElementById('calendar');
        calendar.innerHTML = '';
        const days = ['日', '一', '二', '三', '四', '五', '六'];
        days.forEach(day => {
            const header = document.createElement('div');
            header.classList.add('day', 'header');
            header.textContent = day;
            calendar.appendChild(header);
        });
        const firstDay = new Date(year, month).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        for (let i = 0; i < firstDay; i++) {
            const emptyDay = document.createElement('div');
            emptyDay.classList.add('day');
            calendar.appendChild(emptyDay);
        }
        for (let i = 1; i <= daysInMonth; i++) {
            const day = document.createElement('div');
            day.classList.add('day');
            day.textContent = i;
            calendar.appendChild(day);
        }
    }
    createCalendar(2025, 6); // 创建2025年7月的日历
</script>
</body>
</html>